<template>
  <div class="login">
    <div class="imgs">
      <img src="../assets/logo.png" alt />
    </div>
    <div class="ipt">
      <ul>
        <li>
          <label for="user">
            <img src="../assets/adm.png" alt />
          </label>
          <span class="line"></span>
          <input type="text" id="user" placeholder="会员账号" v-model="user" />
        </li>
        <li>
          <label for="pwd">
            <img src="../assets/pas@2x.png" alt />
          </label>
          <span class="line"></span>
          <input type="text" id="pwd" placeholder="密码" v-model="password" />
        </li>
        <li>
          <label for="yzm">
            <img src="../assets/yzm@2x.png" alt />
          </label>
          <span class="lines"></span>
          <input type="text" id="yzm" maxlength="4" placeholder="验证码" v-model="yanzhma" />
          <span class="yzm" @click="createCode">{{checkCode}}</span>
        </li>
      </ul>
      <div class="jizhu">
        <div class="left clearfix">
          <span class="duihao fl" v-if="check">
            <img src="../assets/yuan.png" alt />
          </span>
          <span class="duihao fl" v-else>
            <img src="../assets/circle.png" alt />
          </span>
          <span class="fl" @click="jizhu($event)">记住密码</span>
          <span class="fr">找回密码？</span>
        </div>
      </div>
      <div class="btn" @click="login">登录</div>
      <div class="nonum">
        <span>没有账号？</span>
        <span @click="$router.push('/register')">立即注册</span>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import { Toast } from "mint-ui";
export default {
  name: "login",
  data() {
    return {
      user: "",
      password: "",
      yanzhma: "",
      checkCode: "",
      check: true,
      url: domain.testUrl
    };
  },
  created() {
    this.createCode();
    this.password = localStorage.getItem("pwd");
  },
  methods: {
    login() {
      var that = this;
      var data = {
        mobile: this.user,
        password: this.password
      };
      if (this.user == "") {
        Toast({
          message: "请输入账号",
          duration: 1600
        });
      } else if (this.password == "") {
        Toast({
          message: "请输入密码",
          duration: 1600
        });
      } else if (this.yanzhma == "") {
        Toast({
          message: "请输入验证码",
          duration: 1600
        });
        this.yanzhma == "";
      } else if (this.yanzhma.toUpperCase() != this.checkCode) {
        Toast({
          message: "验证码输入的不正确",
          duration: 1600
        });
        this.createCode();
        this.yanzhma == "";
      } else {
        this.$axios
          .post(this.url + "/user/login", qs.stringify(data))
          .then(res => {
            console.log(res.data.data);
            if (res.data.status == "ok") {
              this.$router.push({
                path: "/index",
                query: {
                  uid: res.data.data.uid,
                  token: res.data.data.token
                }
              });
            } else if (res.data.status == "error") {
              Toast({
                message: res.data.errormsg,
                duration: 1600
              });
            }
          });
      }
    },
    jizhu(e) {
      console.log(e);
      this.check = false;
      localStorage.setItem("use", this.user);
      localStorage.setItem("pwd", this.password);
    },
    // 图片验证码
    createCode() {
      let code = "";
      var codeLength = 4; //验证码的长度
      var random = new Array(
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ); //随机数
      for (var i = 0; i < codeLength; i++) {
        //循环操作
        var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
        code += random[index]; //根据索引取得随机数加到code上
      }
      this.checkCode = code; //把code值赋给验证码
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 13.33rem;
  background-image: url("../assets/loginbg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding-top: 1.55rem;
  box-sizing: border-box;
  font-size: 0;
  .imgs {
    width: 2.7rem;
    height: 2.2rem;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .ipt {
    margin-top: 1.1rem;
    ul {
      li {
        width: 90%;
        height: 0.8rem;
        line-height: 0.3rem;
        border: 1px solid #c4c1bc;
        margin: 0 auto;
        border-radius: 0.8rem;
        margin-top: 0.25rem;
        overflow: hidden;
        background: #fff;
        label {
          width: 0.8rem;
          display: inline-block;
          text-align: center;
          margin-left: 0.2rem;
          img {
            width: 0.38rem;
          }
        }
        .line {
          display: inline-block;
          width: 1px;
          height: 50%;
          background: #c4c1bc;
          vertical-align: -0.2rem;
        }
        .lines {
          display: inline-block;
          width: 1px;
          height: 50%;
          background: #c4c1bc;
          vertical-align: -0.15rem;
        }
        input {
          width: 77%;
          height: 100%;
          background: transparent;
          text-indent: 0.15rem;

          &::placeholder {
            font-family: HiraginoSansGB-W3;
            font-size: 0.26rem;
            color: #c4c1bc;
          }
          &#yzm {
            width: 50%;
            margin-top: -0.15rem;
          }
        }
        .yzm {
          display: inline-block;
          font-size: 0.26rem;
          width: 25%;
          height: 100%;
          text-align: center;
          padding-top: 0.2rem;
          box-sizing: border-box;
          margin-left: 0.15rem;
          background-color: #d5e5e7;
          font-size: 0.32rem;
          color: #fff;
        }
      }
    }
    .jizhu {
      padding: 0 5%;
      box-sizing: border-box;
      margin-top: 0.32rem;
      span {
        display: inline-block;
        font-size: 0.26rem;
        font-family: HiraginoSansGB-W3;
        color: rgb(68, 68, 68);
        &:nth-child(1) {
          width: 0.3rem;
          height: 0.3rem;
          //    border-radius: 50%;
          //    background: rgb(68,68,68);
          //    margin-top:0.08rem;
          margin-right: 0.15rem;
          img {
            width: 100%;
          }
        }
      }
    }
    .btn {
      cursor: pointer !important;
      width: 90%;
      height: 0.82rem;
      line-height: 0.82rem;
      color: #fff;
      text-align: center;
      margin: 0 auto;
      font-size: 0.34rem;
      border-radius: 0.42rem;
      background-color: #ed6f28;
      margin-top: 0.38rem;
    }
    .nonum {
      width: 35%;
      height: 0.28rem;
      line-height: 0.28rem;
      margin: 0 auto;
      font-size: 0.26rem;
      margin-top: 0.5rem;
      span {
        display: inline-block;
        color: #111;
        &:nth-child(2) {
          color: rgb(237, 111, 40);
          font-family: AlibabaPuHuiTiR;
          cursor: pointer;
        }
      }
    }
  }
}
</style>